<template>
  <div class="login-body">
    <div class="login-container">
      <div class="left-img">
        <img src="../../assets/login_img.png" alt="" />
      </div>
      <div class="right-form">
        <el-form
          :rules="rules"
          :model="ruleForm"
          ref="loginForm"
          :label-position="labelPosition"
          class="login-form"
          label-width="100px"
        >
          <el-form-item prop="phoneEmail" label="超级狗名称">
            <el-input
              v-model="ruleForm.phoneEmail"
              placeholder="超级狗名称"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="Pin 密码">
            <el-input
              v-model="ruleForm.password"
              type="password"
              auto-complete="new-password"
              placeholder="请输入pin密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleLogin"
              style="width: 100%; height: 40px; font-size: 16px"
            >
              登录
            </el-button>
          </el-form-item>
          <el-form-item>
            <div id="errorinfo"></div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login";
import utils from "./index";

import { reportStatus } from "@/utils/Func";
export default {
  name: "login",
  data() {
    return {
      labelPosition: "right",
      ruleForm: {
        phoneEmail: "",
        password: "",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入pin密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "密码长度应该在6-16个字符之间",
            trigger: "blur",
          },
        ],
      },
      errorStatus: 0,
      dogID: "",
    };
  },
  mounted() {
    utils.setVm(this);
    utils.loadFunc();
  },
  methods: {
    /**登录 */
    async handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (!this.dogID) {
            this.$message.error("没有找到所需的超级狗");
            return;
          }
          if (this.errorStatus != 0) {
            this.$message.error(reportStatus(Number(this.errorStatus)));
            return;
          }

          this.doAuth();
        }
      });
    },
    doAuth() {
      const { phoneEmail, password } = this.ruleForm;
      login({ phone: phoneEmail, factor: password }).then(async (res) => {
        if (res.data.success) {
          const { name, token, id } = res.data.data;
          this.$store.commit("user/SET_TOKEN", token);
          this.$store.commit("user/SET_USERNAME", name);
          this.$store.commit("user/SET_USERID", id);
          await this.$store.dispatch("app/GET_SOURCEData", id);
          setTimeout(() => {
            this.$message.success(res.data.msg);
            this.$router.push("/runData");
          }, 1000);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#errorinfo {
  color: red;
  font-size: 14px;
  text-align: center;
}
.login-body {
  width: 100%;
  height: 100vh;
  background: url(../../assets/bg.jpg) no-repeat center;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  .login-container {
    width: 50%;
    min-height: 55vh;
    height: 55vh;
    background: #fff;
    display: flex;
    flex-direction: row;
    border-radius: 6px;
    overflow: hidden;
    .left-img {
      width: 50%;
      height: 100%;
      padding: 10px 20px;
      box-sizing: border-box;
      background: #1c6fd1;

      img {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
    }
    .right-form {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .login-form {
        width: 80%;
        .loginForm-title {
          font-size: 24px;
          color: #547bd5;
          font-weight: 500;
          text-align: center;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
<style lang="less">
.login-form .el-input__inner {
  height: 46px;
  line-height: 46px;
}
</style>
